<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar fixed>
      <van-button
        class="search-btn"
        slot="title"
        size="mini"
        round
        icon="search"
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- 导航栏 -->
    <!-- 通过 animated 属性可以开启切换标签内容时的转场动画。 -->
    <!-- 通过 swipeable 属性可以开启滑动切换标签页。 -->
    <van-tabs v-model="active" animated swipeable fixed>
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <artList :artlist="item"></artList>
      </van-tab>
      <div class="placehold" slot="nav-right"></div>
      <div class="more" slot="nav-right" @click="isEditShow = true">
        <i class="iconfont icongengduo"></i>
      </div>
    </van-tabs>
    <!-- 更多弹出层 -->
    <van-popup
      v-model="isEditShow"
      closeable
      position="bottom"
      close-icon-position="top-left"
      round
      :style="{ height: '90%' }"
    >
      <edit-channel
        :channels="channels"
        :active="active"
        @activeIndex="sunRequest"
        @activeIndexsub="sunRequestSub"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user' // 导入获取用户指定频道请求
import artList from './components/artList' // 导入artList组件
import editChannel from './components/editChannel' // editChannel
import { mapState } from 'vuex' // 导入全局数据
import { getItem } from '@/utils/storage' // 导入封装的本地存储方法
export default {
  data () {
    return {
      active: 0, // 高亮索引
      channels: [], // 频道列表数据
      isEditShow: false // 汉堡按钮页面显示隐藏
    }
  },
  components: {
    artList,
    editChannel
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.loadUserChannels()
  },

  methods: {
    // 加载频道
    async loadUserChannels () {
      try {
        if (this.user) {
          // 登录状态发送请求获取用户频道数据
          const { data } = await getUserChannels()
          this.channels = data.data.channels
        } else {
          // 未登录状态
          if (getItem('MYCHANNEL_LIST')) {
            // 本地有频道数据则使用
            this.channels = getItem('MYCHANNEL_LIST')
          } else {
            // 本地没有数据则发送请求获取默认频道数据
            const { data } = await getUserChannels()
            this.channels = data.data.channels
          }
        }
      } catch (error) {
        this.$toast('获取频道数据失败！')
      }
    },
    // 子组件传过来的高亮索引
    sunRequest (index) {
      this.active = index
      this.isEditShow = false
    },
    // 子组件传过来的删除频道后的高亮索引
    sunRequestSub (index) {
      this.active = this.active - 1
      if (this.active <= 0) {
        this.active = 0
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar__title {
  max-width: unset;
}
.van-icon {
  color: #fff;
}
.search-btn {
  width: 555px;
  height: 64px;
  background-color: #5babfb;
  border: none;
  color: #fff;
  font-size: 28px;
}
/deep/.van-tab {
  font-size: 30px;
  padding: 0;
  min-width: 200px;
  color: #777;
  height: 80px;
  border-right: 1px solid #edeff3;
}
/deep/.van-tab--active {
  color: #333;
}
/deep/.van-tabs__line {
  bottom: 8px;
  width: 31px;
  height: 6px;
  background-color: #3296fa;
}
/deep/.van-tabs__nav {
  height: 80px;
  padding: 0;
  position: fixed;
  top: 92px;
  z-index: 11;
  left: 0;
  right: 0;
}
.placehold {
  width: 66px;
  height: 82px;
  flex-shrink: 0;
}
.more {
  position: fixed;
  right: 0;
  text-align: center;
  width: 66px !important;
  height: 82px;
  background: #fff;
  line-height: 82px;
  opacity: 0.92;
  &::after {
    content: '';
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background-color: #fff;
    background: url('../../assets/gradient-gray-line.png');
    background-size: contain;
    opacity: 0.92;
  }
}
.icongengduo {
  font-size: 40px;
}
.home {
  padding-top: 85px;
  padding-bottom: 100px;
}
</style>
